<template>
    <div class="yorha-dialog-hover">
        <div class="dialog-body" >
            <div class="text-box">
                {{showedText}}
            </div>
            <img class="logo-btn" v-show="showNextButton" src="../../assets/logo/yorha-yellow.png" @click="showNext">
        </div>
        <div class="title">
            <div class="top">
                <div class="left"></div>
                <div class="right">{{speaker}}</div>
            </div>
            <div class="bottom"></div>
        </div>
        <yorha-normal-button-group v-if="showSelectBtns"
                                   class="btns"
                                   :show-left="false"
                                   @click="selectAnswer"
                                   :buttons="selectBtns"></yorha-normal-button-group>
    </div>
</template>

<script setup>
/*
* 使用v-if控制该组件
* */
import YorhaNormalButtonGroup from "../YorhaNormalButtonGroup.vue"
import {onMounted, reactive, ref} from "vue";
let props = defineProps(['steps','needSelect', 'speaker','selectBtns','selectAnswer'])
let emits = defineEmits(['complete'])
let showedText = ref('')
let stepIndex = 0
let showSelectBtns = ref(false)
let showNextButton = ref(false)



/*
* 点击展示下一句话
* */
function showNext() {
    if (stepIndex>=props.steps.length) {
        showNextButton.value = false
        if (props.needSelect) {
            showSelectBtns.value = true
        } else {
            emits('complete')
        }
        return
    }
    showSteps(stepIndex)
    stepIndex++
}

/*
* 展示下一句话
* */
function showSteps(times) {
    let clock
    let singleStepIndex = 0
    showedText.value = ''
    showNextButton.value = false
    clock = setInterval(()=>{
        showedText.value += props.steps[times][singleStepIndex]
        singleStepIndex++
        if (singleStepIndex>=props.steps[times].length) {
            showNextButton.value = true
            clearInterval(clock)
        }

    },50)
}

/*
* 点击对话框最后的选项的响应事件
* */
function btnsClickHandler(text) {
    emits('complete', text)
}

onMounted(()=>{
    showNext()
})
</script>

<style lang="less" scoped>
@import "../../style";

.yorha-dialog-hover {
    .yorha-hover;
    & > .dialog-body {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 30vh;
        background: rgba(51, 51, 51, 0.5);
        display: flex;
        justify-content: center;
        &>.logo-btn {
            width: 80px;
            height: auto;
            position: absolute;
            bottom: 20px;
            right: 20px;
            animation: yorha-logo-dialog-move 1s infinite linear;
        }
        &>.text-box {
            width: 50%;
            height: 100%;
            padding: 20px;
            box-sizing: border-box;
            font-size: 20px;
            color: white;
            text-shadow: 1px 1px 2px @white;
        }
    }

    & > .btns {
        position: absolute;
        bottom: 32vh;
        right: 20px;
    }

    & > .title {
        position: absolute;
        bottom: 32vh;
        left: 0;
        width: auto;
        height: 36px;
        background: rgba(51, 51, 51, 0.6);


        & > .top {
            width: auto;
            height: 28px;
            display: flex;

            & > .left {
                width: 100px;
                height: 28px;
                background: linear-gradient(rgba(51, 51, 51, 0.6) 25%, @white 25%, @white 30%, rgba(51, 51, 51, 0.6) 30%);
            }

            & > .right {
                width: 100px;
                height: 28px;
                font-size: 20px;
                color: white;
                text-shadow: 1px 1px 2px @white;
                background: rgba(51, 51, 51, 0.6);
            }
        }

        & > .bottom {
            width: auto;
            height: 8px;
            background: linear-gradient(@white 20%, rgba(51, 51, 51, 0.6) 20%);
        }

    }
}

@keyframes yorha-logo-dialog-move {
    0% {
        bottom: 20px;
    }
    50% {
        bottom: 40px;
    }
    100% {
        bottom: 20px;
    }
}
</style>